<template>
  <div class="form-item-box">
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" show-word-limit :rows="2" type="textarea" />
    </div>
    <div v-else class="form-item-el">
      <el-input
        v-model="_value"
        :maxlength="$attrs.maxLength"
        :placeholder="placeholder"
        :show-word-limit="$attrs.showWordLimit"
        :rows="3"
        type="textarea"
      >
      </el-input>
      <div class="buttons">
        <el-button type="primary" v-show="isShowImageText" link @click="handelImageText">图文案例</el-button>
        <div class="line" v-show="isShowImageText && isShowCompare"></div>
        <el-button type="primary" v-show="isShowCompare" link @click="handelContrast">优劣势分析</el-button>
      </div>
    </div>
  </div>
  <w-dialog
    clickClose
    width="1200px"
    :click-close="false"
    closeFree
    fullscreen
    :showFooter="false"
    :border="false"
    :title="formItem.title"
    v-model="viewVisible"
  >
    <div style="height: 500px; overflow-y: auto">
      <ImageTextPreview :data="imageTextList" v-if="isImageText" />
      <ComparePreview :global-compare="globalCompare" v-else />
    </div>
  </w-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import ImageTextPreview from "@/views/system/designForm/components/ImageTextPreview.vue";
import ComparePreview from "@/views/system/designForm/components/ComparePreview.vue";
import { isEmpty } from "lodash";

const { proxy } = getCurrentInstance();
const props = defineProps({
  optionsConfig: {
    type: Object,
    default: () => ({})
  },
  formItem: {
    type: Object,
    default: () => {
      return {};
    }
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  },
  enableScan: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const isShowImageText = computed(() => {
  const globalSimple = props.optionsConfig?.globalSimple;
  if (globalSimple) {
    return globalSimple.desc || globalSimple.pic?.length || globalSimple?.video?.length;
  }
  return false;
});
const isShowCompare = computed(() => {
  return props.optionsConfig?.globalCompare?.length;
});

/**
 * 图文案例
 */
const viewVisible = ref(false);
const isImageText = ref(false);
const imageTextList = ref([]);
const handelImageText = () => {
  const globalSimple = props.optionsConfig?.globalSimple;
  const imageTextItemObj = props.optionsConfig?.imageTextList[0];
  imageTextList.value = [{ ...imageTextItemObj, ...globalSimple }] ?? [];
  viewVisible.value = true;
  isImageText.value = true;
};
/**
 * 优劣势分析
 */
const globalCompare = ref([]);
const handelContrast = () => {
  globalCompare.value = props.optionsConfig?.globalCompare;
  viewVisible.value = true;
  isImageText.value = false;
};

if (isEmpty(_value.value) && !proxy.$attrs.disabled) {
  _value.value = proxy.$attrs.defaultValue;
}
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.form-item-box {
  width: 100%;
}

.form-item-el {
  @include mixin.flex-center(space-between);
  :deep(.el-textarea__inner) {
    margin-left: 10px;
    box-shadow: none;
    border-radius: 4px;
    background-color: #f2f3f5;
  }
  :deep(.el-input__count) {
    background-color: #f2f3f5 !important;
  }
  .buttons {
    @include mixin.flex-align;
    margin-left: 50px;
    .line {
      width: 2px;
      height: 16px;
      margin: 0 10px;
      background-color: #dcdfe6;
      border-radius: 2px;
    }
  }
}
</style>
